<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>2.详聊v-for</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="demo">
            <h1>v-for遍历数组</h1>
            <ul>
                <li v-for="(c,index) in cars" :key="c.id">
                    车名：{{c.name}}，价格：{{c.price}}，{{index}}
                </li>
            </ul>

            <hr>
            <h1>v-for遍历对象</h1>
            <ul>
                <li v-for="(value,key,index) in school" :key="key">
                    {{value}}，{{key}}，{{index}}
                </li>
            </ul>

            <hr>
            <h1>v-for遍历字符串</h1>
            <ul>
                <li v-for="(char,index) in message">
                    {{char}}，{{index}}
                </li>
            </ul>

            <hr>
            <h1>v-for遍历指定次数</h1>
            <h2 v-for="(number,index) in number">你好，{{number}}，{{index}}</h2>

            <hr>
            <h2 v-for="a in undefined">尚硅谷</h2>
            <h2 v-for="a in null">尚硅谷</h2>
            <h2 v-for="a in ''">尚硅谷</h2>
            <h2 v-for="a in true">尚硅谷</h2>
            <!-- <h2 v-for="a in NaN">尚硅谷</h2> -->

        </div>

        <script type="text/javascript">
            //阻止 vue 在启动时生成生产提示。
            Vue.config.productionTip = false 
            new Vue({
                el:'#demo',
                data:{
                    cars:[
                        {id:'76tqet8w',name:'宝马',price:'100W'},
                        {id:'9y87adsa',name:'奔驰',price:'120W'},
                        {id:'iuyiusa2',name:'雅迪',price:'3000'}
                    ],
                    school:{
                        name:'尚硅谷',
                        address:'宏福科技园'
                    },
                    message:'你好啊！',
                    number:10
                }
            })
        </script>
    </body>
</html>